<template>
    <div class="nav">
        <el-menu
            :default-active="activeIndex"
            class="navMenu"
            background-color="#2C3951"
            text-color="#ffffff"
            active-text-color="#2468F2"
            router
            @select="handleSelect">
            <el-menu-item :index="menulist[0].path">
                <i class="el-icon-menu"></i>
                <span slot="title">对抗样本介绍</span>
            </el-menu-item>
            <el-submenu :index="menulist[1].path">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>白盒攻击</span>
                </template>
                <el-menu-item :index="menulist[1].Children[0].path">FGSM</el-menu-item>
                <el-menu-item :index="menulist[1].Children[1].path">PGD</el-menu-item>
                <el-menu-item :index="menulist[1].Children[2].path">DeepFool</el-menu-item>
                <el-menu-item :index="menulist[1].Children[3].path">CW</el-menu-item>
            </el-submenu>
            <el-submenu :index="menulist[2].path">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>黑盒攻击</span>
                </template>
                <el-menu-item :index="menulist[2].Children[0].path">SimBA</el-menu-item>
                <el-menu-item :index="menulist[2].Children[1].path">BA</el-menu-item>
            </el-submenu>
             <el-menu-item :index="menulist[3].path">
                <i class="el-icon-menu"></i>
                <span slot="title">测试</span>
            </el-menu-item>
        </el-menu>

    </div>
</template>
<script>
    export default{
        name : "NavMenu",
        data(){
            return {
                menulist:[
                    {path:'/Mainpage/AdvIntro',title:'对抗样本介绍',hasChild:false,Children:[]},
                    {path:'/Mainpage/WBT',title:'白盒攻击',hasChild:true,Children:[
                        {path:'/Mainpage/WBT/FGSM',title:'FGSM',hasChild:false,Children:[]},
                        {path:'/Mainpage/WBT/PGD',title:'PGD',hasChild:false,Children:[]},
                        {path:'/Mainpage/WBT/DeepFool',title:'DeepFool',hasChild:false,Children:[]},
                        {path:'/Mainpage/WBT/CW',title:'CW',hasChild:false,Children:[]}
                    ]},
                    {path:'/Mainpage/BBT',title:'黑盒攻击',hasChild:true,Children:[
                        {path:'/Mainpage/BBT/SIM',title:'SimBA',hasChild:false,Children:[]}, // 要加/ 即：/Mainpage 而不是 Mainpage 加了/是绝对路径
                        {path:'/Mainpage/BBT/BA',title:'BA',hasChild:false,Children:[]}
                    ]},
                    {path:'/Mainpage/TestPage',title:'测试',hasChild:false,Children:[]},
                    {path:'/Mainpage/logManagement',title:'日志',hasChild:false,Children:[]},
                ]
            }
        },
        methods:{
            handleSelect(key,keypath){
                console.log(key,keypath);
            }
        },
        computed:{
            activeIndex(){
                return this.$route.path;
            }
        }
    }
</script>
<style scoped>
    .nav{
        /* 设置固定在左侧 */
        position: fixed;
        top: 10vh; /* 留出头部的空间 */
        left: 0;
        width: 220px; /* 与el-aside的宽度一致 */
        height: 90vh; /* 根据需要调整高度 */
        overflow-y: auto; /* 启用滚动 */
    }
    .el-dropdown-menu__item, .el-menu-item{
        /* 字体设置 --- 注意只替换颜色字体等，过多修改就会出现很多bug，会有样式冲突*/
        font-size: 16px !important;
        color: #FFFFFF !important;
        /* font-family: 思源黑体; */
    }

</style>
